<template>
		<div class="">
				<div class="contentA" id="">
					正在执行打包任务，请您耐心等待......
				</div>
				<div class="contentB">
						<ProgressBar :step="step"></ProgressBar>
				</div>
				<div class="contentC">
					<p>打包任务可能需要执行10-30分钟，您可以关闭此对话框进入后台打包，打包完成后请点击 <a href="#" @click="gotoPackageList">包管理</a>下载安装/升级包</p>
					<p>如果您想取消正在执行的打包任务，点击<a href="#" @click="cancelPackaging">取消打包</a></p>		
				</div>
		</div>
		
</template>

<script scoped>
import ProgressBar from '../components/ProgressBar'
import packagingUtil from '../packagingUtil.js'
export default {
  	name: 'Nav',
	props: ['step'],
	components: {ProgressBar},
  	data () {
		return {
			
		}
  	},
	methods:{
		gotoPackageList() {
			this.$store.commit('changeActiveOption' , 'packageManagement');
			this.$router.push('/nav/packageManagement');
			this.$store.dispatch('getPackagesAction',this);
		
		},
		cancelPackaging() {
			packagingUtil.myConfirmBox ("您确定要取消打包吗？","提示",()=>{this.$emit("cancelPackaging")},this);
		}
	},
	computed: {
		
	}

}
</script>

<style>
*{
	margin:0;
	padding:0;
}
.contentA{
	font-family: MicrosoftYaHei;
	font-size: 16px;
	margin-top: 20px;
    text-align: center;
	color: #f42c2c;
}
.contentB{
	display: flex;
    justify-content: center;
}
.contentC >p{
	font-family: MicrosoftYaHei;
	font-size: 14px;
	width: 450px;
    padding: 10px 40px 10px 40px;
}
.contentC > p > a{
	color: #007bff;
	text-decoration: none;
}


</style>